<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../css/dom-demo.css" />
    <title>Document</title>
    <style>
      /* * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 300px;
        height: 300px;
        background-color: red;
        position: absolute;
        left: 30px;
        top: 50px;
        border: 2px solid black;
      } */

      /* * {
        margin: 0;
        padding: 0;
      }
      .view {
        width: 1000px;
        height: 800px;
        overflow: visible;
        border: 2px solid black; */
      /* overflow-y: scroll; */
      /* }
      .content {
        overflow: hidden;
      }
      .content > li {
        float: left;
      } */

      /* * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 100%;
        height: 300px;
        background-color: pink;
        overflow-x: scroll;
      }
      .box1 p {
        width: 5000px;
        height: 100%;
      }
      .box2 {
        width: 300px;
        height: 500px;
        background-color: pink;
        overflow-y: scroll;
      }
      .box2 p {
        width: 100%;
        height: 2000px;
      } */

      /* * {
        margin: 0;
        padding: 0;
      } */
      /* #box {
        width: 250px;
        height: 400px;
        background-color: pink;
        position: absolute;
        left: 0;
        top: 0;
        display: none;
      } */
      /* #box {
        width: 300px;
        height: 300px;
        background-color: red;
        position: absolute;
        left: 300px;
        top: 300px;
      } */
    </style>
  </head>
  <body>
    <!-- 我是div标签
    <ul class="abc">
      我是ul节点
      <li>1</li>
      <li>2</li>
      <li>3</li>
      我是ul节点text
    </ul>
    <div class="box"></div>
    我是box标签 -->

    <!-- <ul id="lis">
      <li>999</li>
    </ul>
    <div id="box">我是div标签</div> -->
    <!-- <div class="box a b c d" id="app" name="abc" item="def">我是div标签</div>
    <a href="https://www.baidu.com">百度一下</a>
    <input type="" id="ipt" />
    <input type="" class="ipts" /> -->
    <!-- <div id="box"></div> -->

    <!-- 视口 -->
    <!-- <div class="view"> -->
    <!-- 容器 -->
    <!-- <ul class="content"> -->
    <!-- 内容 -->
    <!-- <li style="background-color: red"></li>
        <li style="background-color: blue"></li>
        <li style="background-color: yellow"></li>
        <li style="background-color: green"></li>
        <li style="background-color: purple"></li> -->
    <!-- </ul> -->
    <!-- </div> -->

    <!-- <div class="box1">
      <p>
        豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年？嗟乎！时运不齐，命途多舛。冯唐易老，李广难封。屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？所赖君子见机，达人知命。老当益壮，宁移白首之心？穷且益坚，不坠青云之志。酌贪泉而觉爽，处涸辙以犹欢。北海虽赊，扶摇可接；东隅已逝，桑榆非晚。孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！勃，三尺微命，一介书生。无路请缨，等终军之弱冠；有怀投笔，慕宗悫之长风。舍簪笏于百龄，奉晨昏于万里。非谢家之宝树，接孟氏之芳邻。他日趋庭，叨陪鲤对；今兹捧袂，喜托龙门。杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？呜乎！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。请洒潘江，各倾陆海云尔：滕王高阁临江渚，佩玉鸣鸾罢歌舞。画栋朝飞南浦云，珠帘暮卷西山雨。闲云潭影日悠悠，物换星移几度秋。阁中帝子今何在？槛外长江空自流。
      </p>
    </div>
    <div class="box2">
      <p>
        豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年？嗟乎！时运不齐，命途多舛。冯唐易老，李广难封。屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？所赖君子见机，达人知命。老当益壮，宁移白首之心？穷且益坚，不坠青云之志。酌贪泉而觉爽，处涸辙以犹欢。北海虽赊，扶摇可接；东隅已逝，桑榆非晚。孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！勃，三尺微命，一介书生。无路请缨，等终军之弱冠；有怀投笔，慕宗悫之长风。舍簪笏于百龄，奉晨昏于万里。非谢家之宝树，接孟氏之芳邻。他日趋庭，叨陪鲤对；今兹捧袂，喜托龙门。杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？呜乎！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。请洒潘江，各倾陆海云尔：滕王高阁临江渚，佩玉鸣鸾罢歌舞。画栋朝飞南浦云，珠帘暮卷西山雨。闲云潭影日悠悠，物换星移几度秋。阁中帝子今何在？槛外长江空自流。
      </p>
    </div> -->

    <!-- <button id="a">click</button>
    <button id="b">dblclick</button>
    <button id="c">mouseover || mouseout</button>
    <input type="text" id="d" value="focus || blur" />
    <input type="text" id="e" value="input || change" /> -->
    <!-- <div id="box"></div>
    <p id="text">ksjfqjwfpwjfonlggljgj</p> -->

    <!-- <div id="box"></div> -->
    <!-- <div id="wrap">
      <div id="box"></div>
    </div> -->
    <!-- <div id="table">
      <button class="table button"></button>
      <button class="table button"></button> -->
    <!--100个table button-->
    <!-- </div> -->

    <!-- <div id="box">
			<h2 id="city">南昌</h2>
			<ul id="items">
				<li class="active">南昌</li>
				<li>吉安</li>
				<li>九江</li>
				<li>宜春</li>
				<li>上饶</li>
				<li>鹰潭</li>
				<li>景德镇</li>
				<li>萍乡</li>
				<li>抚州</li>
				<li>赣州</li>
				<li>新余</li>
				<li>三江</li>
			</ul>
		</div> -->

    <!-- 加载动画的容器 -->
    <div id="loader"></div>
    <!-- 页面内容 -->
    <div id="content">
      <h1>welcome to the Animated Page</h1>
      <p>Content appears after the loading animation completes.</p>
      <!-- 其他内容 -->
    </div>
    <script src="../js/dom-demo.js"></script>
  </body>
</html>
